<!-- 模板 -->
<template>
  <div class="center">
    <div class="box">
      <div v-for="(item, index) in 100" :key="index">{{ item }}</div>
    </div>
    <div class="box">
      <div v-for="(item, index) in 100" :key="index">{{ item }}</div>
    </div>
  </div>
</template>

<script>
// import component from '@/components/*.vue'
export default {
  name: '',
  data() {
    return {}
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {},
  created() {},
  mounted() {}
}
</script>

<style lang="less" scoped>
//@import url(); 引入公共css类
.center {
  background-color: aqua;
  //计算容器的高度是视口高度减去顶部高度和页脚高度
  height: calc(100vh - 2.2rem);
  //设置容器为flex布局
  display: flex;
  align-items: center;
  justify-content: center;
  .box {
    width: 100%;
    height: 100%;
    border: 1px solid black;
    overflow: scroll;
  }
  .box:nth-of-type(1) {
    flex: 1;
    background-color: chocolate;
  }
  .box:nth-of-type(2) {
    flex: 3;
  }
}
</style>
